<template>
  <div class="home">
    <bg></bg>
    <div class="head">
      <h1 style="letter-spacing:10px;">大数据分析平台</h1>
      <div class="weather">
        <span id="showTime"></span>
        <router-link>管理平台</router-link>
      </div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <Box title="严重省份TOP5">
            <echart-zhu ref="e1" color="red" :data="provincelist"></echart-zhu>
          </Box>
          <Box title="严重城市TOP5">
            <echart-zhu ref="e2" color="yellow" :data="citylist"></echart-zhu>
          </Box>
          <Box>
            <!-- <echart-pie class="sy" title="年龄分布" :data="agelist" ref="e3"></echart-pie>
            <echart-pie class="sy" title="职业分布" :data="joblist" ref="e4"></echart-pie>
            <echart-pie class="sy" title="性别分布" :data="genderlist" ref="e5"></echart-pie> -->
          </Box>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter">{{ganran}}</li>
                <li class="pulll_left counter">{{zhiyu}}</li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left">现有确诊</li>
                <li class="pulll_left">境外输入</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="map1">
              <img src="picture/lbx.png" />
            </div>
            <div class="map2">
              <img src="picture/jt.png" />
            </div>
            <div class="map3">
              <img src="picture/map.png" />
            </div>
            <china-area ref="map" :list="cityganranlist"></china-area>
          </div>
        </li>
        <li>
          <Box title="最新动态">
            <ul class="dongtailist" style>
              <li :style="dongtaistyle(item.type)" v-for="item in dongtailist" :key="item.id">
                [
                <span>{{item.type | fmtDongtaiType}}</span>
                ]
                {{item.content}}
                {{item.data}}
              </li>
            </ul>
          </Box>
          <Box title="历史治愈数/死亡数">
            <echart-line ref="e6" color="#27d08a" :data="zslist"></echart-line>
          </Box>
          <Box title="当天新增治愈数/死亡数">
            <echart-line ref="e7" color="#27d08a" :data="zslist1"></echart-line>
          </Box>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import "@/assets/css/home.css";
import bg from "@/components/BackgroundCanvas";
import "@/assets/js/setFontSize";
import echartZhu from "@/components/echarts/zhu";
import echartLine from "@/components/echarts/line";
import echartPie from "@/components/echarts/pie";
import chinaArea from "@/components/echarts/area";
import Box from "@/components/Box";

export default {
  name: "Home",
  components: { bg, echartZhu, echartPie, Box, echartLine, chinaArea },
  data() {
    return {
      provincelist: [
        {
          label: "湖北",
          value: 22003
        },
        {
          label: "浙江",
          value: 8003
        },
        {
          label: "河南",
          value: 6803
        },
        {
          label: "江苏",
          value: 3603
        },
        {
          label: "湖南",
          value: 2403
        }
      ],
      citylist: [
        {
          label: "武汉",
          value: 6003
        },
        {
          label: "温州",
          value: 3703
        },
        {
          label: "郑州",
          value: 2403
        },
        {
          label: "南京",
          value: 1103
        },
        {
          label: "淮安",
          value: 836
        }
      ],
      // 年龄分布数据
      agelist: [
        {
          name: "0-10",
          value: 1
        },
        {
          name: "10-20",
          value: 5
        },
        {
          name: "20-30",
          value: 20
        },
        {
          name: "30-40",
          value: 10
        },
        {
          name: "40-50",
          value: 20
        },
        {
          name: "50-60",
          value: 50
        },
        {
          name: "60-70",
          value: 100
        },
        {
          name: "70以上",
          value: 200
        }
      ],
      // 性别数据
      genderlist: [
        {
          name: "男",
          value: 400
        },
        {
          name: "女",
          value: 500
        }
      ],
      ganran: 0,
      zhiyu: 0,
      // 职业数据
      joblist: [
        {
          name: "医生",
          value: 90
        },
        {
          name: "教师",
          value: 40
        },
        {
          name: "司机",
          value: 30
        }
      ],
      dongtailist: [
        {
          id: 0,
          content: "",
          time: "",
          type: 0
        },
        {
          id: 1,
          content: "",
          time: "",
          type: 1
        },
        {
          id: 2,
          content: "",
          time: "",
          type: 2
        },
        {
          id: 3,
          content: "",
          time: "",
          type: 3
        }
      ],
      zslist: {
        title: ["治愈", "死亡"],
        color: ["#ada", "#f00"],
        date: [2, 3, 4, 5, 7, 8, 9, 10],
        data: [
          [10, 322, 113, 434, 47, 88, 49, 120],
          [120, 122, 333, 434, 75, 78, 29, 310]
        ]
      },
      zslist1: {
        title: ["治愈", "死亡"],
        color: ["orange", "#f00"],
        date: [2, 3, 4, 5, 7, 8, 9, 10],
        data: [
          [210, 122, 533, 144, 37, 86, 79, 210],
          [5, 66, 7, 22, 7, 8, 9, 10]
        ]
      },
      cityganranlist: []
    };
  },
  filters: {
    fmtDongtaiType(val) {
      return ["*", "*", "*", "*","*"][val];
    }
  },
  methods: {
    dongtaistyle(val) {
      return { color: ["orangered", "green", "yellow", "red"][val] };
    },
    async initEcharts() {
      // 这条执行了 解决BUG
      const { data: res } = await this.$axios.get("/api/data_top5_provinces");
      this.provincelist = res;
      console.log(this.provincelist);
      Object.keys(this.$refs).forEach(r => {
        // console.log(222)
        this.$refs[r].init();
      });
    },
    async getData() {
      const { data: res } = await this.$axios.get("/api/data_top5_provinces");
      // console.log(res);
      this.provincelist = res;
    },
    async getcitylist() {
      const { data: res } = await this.$axios.get("/api/data_top5_citys");
      console.log(res.data);
      this.citylist = res.data;
    },
    async getganran() {
      const { data: res } = await this.$axios.get("/api/data_total");
      console.log(res);
      this.ganran = res.nowConfirm;
      this.zhiyu = res.importedCase;
    },
    async getList() {
      const {data:res} = await this.$axios.get('/api/data_chinadayadd_list', {params:{day:10}})
      console.log(res);
      this.dongtailist = res;

      
    },
    async getline() {
      // 这个是中国每日新增的数据
      const {data:res} = await this.$axios.get('/api/data_chinadayadd', {params:{day:20}})
      console.log(res);
      this.zslist1.date = res._date;
      const data = []
      const arrone = res.dead;
      const arrtwo = res.heal;
        data.push(arrtwo);
      data.push(arrone);
    
      console.log(data);
      this.zslist1.data = data;
    },
    async getHistory() {
      const {data:res} = await this.$axios.get('/api/data_chinaday', {params:{day:20}})
      console.log(res);
      this.zslist.date = res._date;
      const data = [];
      const arrone = res.dead;
      const arrtwo = res.heal;
      data.push(arrtwo);
      data.push(arrone);
      this.zslist.data = data;
    },
    // 地图数据
    async getMap() {
      const {data:res} = await this.$axios.get('/api/data_all_provinces')
      console.log(res);
      this.cityganranlist = res;
      console.log(this.cityganranlist)
    }
  },
  mounted() {
    if (this.$route.query.zzz) {
      this.initEcharts();
    }
    window.onload = window.onresize = () => {
      let html = document.querySelector("html");
      html.style.fontSize = window.innerWidth / 20 + "px";
      this.initEcharts();
    };
  },
  created() {
    this.getData();
    this.getcitylist();
    this.getganran();
    // 获取每日状况
    this.getList()
    // 获取每日新增的数据
    this.getline()
    // 获取历史治愈数和死忙人数
    this.getHistory();
    // 城市地图数据
    this.getMap();
  }
};
</script>
<style scoped>
.home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000d4a url(../assets/images/bg.jpg) center top;
  background-size: cover;
  color: #666;
  font-size: 0.1rem;
}

.dongtailist li,
.dongtailist li span {
  font-size: 14px;
  padding: 5px;
  text-align: left;
}

.dongtailist {
  overflow-y: auto;
  padding: 10px;
  height: 90%;
}
.dongtailist::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color: red;
}
.dongtailist::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #fff;
  scrollbar-arrow-color: #fff;
}
.dongtailist::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.2);
}
</style>